<template>
  <el-container>
    <el-header>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-form-item label="任务标题">
            <el-input v-model="search.taskTitle" placeholder="任务标题" clearable></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker v-model="search.taskStart" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="开始时间" clearable></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker v-model="search.taskEnd" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="结束时间" clearable></el-date-picker>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select v-model="search.taskStatus" placeholder="请选择任务状态" clearable>
              <el-option v-for="dict in task_status" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <jdTable ref="table" :apiObj="apiObj" :params="params" stripe @selection-change="selectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" align="center" prop="taskId" />
        <el-table-column label="任务标题" align="center" prop="taskTitle" />
        <el-table-column label="开始时间" align="center" prop="taskStart" />
        <el-table-column label="当前步骤" align="center" prop="taskStep" />
        <el-table-column label="任务状态" align="center" prop="taskStatus">
          <template #default="scope">
            <dict-tag :options="task_status" :value="scope.row.taskStatus" />
          </template>
        </el-table-column>
        <el-table-column label="任务进度" align="center" prop="taskCompletion">
          <template #default="scope">
            <el-progress :percentage="+scope.row.taskCompletion"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" text type="primary" icon="el-icon-edit" :disabled="[1, 2, 5].indexOf(scope.row.taskStatus) > -1" @click="table_edit(scope.row)"> 编辑 </el-button>
            <el-button size="small" text type="primary" :disabled="!scope.row.taskStatus" icon="el-icon-s-data" @click="table_show(scope.row)"> 查看详情 </el-button>
          </template>
        </el-table-column>
      </jdTable>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      search: {
        taskTitle: "",
        taskStart: "",
        taskEnd: "",
        taskStatus: ""
      },
      params: {},
      apiObj: this.$API.workflow.task.listTask,
      selection: [],
      // 任务状态字典
      task_status: []
    }
  },
  mounted() {
    this.getDict()
  },
  methods: {
    // 编辑
    table_edit() {},
    // 展示
    table_show() {},
    // 查询
    upsearch() {
      console.log(this.search)
      this.params = { ...this.search }
      // alert(this.params)
    },
    selectionChange(selection) {
      this.selection = selection
    },
    getDict() {
      this.Dict.get("sys_task_status").then((res) => {
        this.task_status = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.right-panel-search {
  ::v-deep .el-form-item {
    margin-bottom: 0;
    margin-right: 5px;
    .el-form-item__label {
      font-weight: bold;
    }
    .el-input {
      width: 200px;
    }
  }
}
</style>
